<template>
  <div class="pagination">
    <span class="total-items">总条目数: {{ totalItems }}</span>
    <button
      class="page-button prev"
      @click="changePage(currentPage - 1)"
      :disabled="currentPage === 1"
    >
      上一页
    </button>
    <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
    <button
      class="page-button next"
      @click="changePage(currentPage + 1)"
      :disabled="currentPage >= totalPages"
    >
      下一页
    </button>
    
    <input
      type="number"
      v-model="inputPage"
      @keyup.enter="goToPage"
      min="1"
      :max="totalPages"
      placeholder="跳转页数"
      class="page-input"
    />
    <span class="page-size-text">每页显示:</span>
    <select v-model="itemsPerPage" @change="updateItemsPerPage" class="page-size-select">
      <option v-for="option in itemsPerPageOptions" :key="option" :value="option">
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    currentPage: {
      type: Number,
      required: true,
    },
    totalItems: {
      type: Number,
      required: true,
    },
    itemsPerPage: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      inputPage: this.currentPage,
      itemsPerPageOptions: [5, 10, 20, 50],
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    },
  },
  methods: {
    changePage(newPage) {
      if (newPage >= 1 && newPage <= this.totalPages) {
        this.$emit("page-changed", newPage);
      }
    },
    goToPage() {
      const page = parseInt(this.inputPage);
      if (page >= 1 && page <= this.totalPages) {
        this.changePage(page);
      } else {
        alert(`请输入有效的页码（1-${this.totalPages}）`);
      }
    },
    updateItemsPerPage() {
      this.$emit("items-per-page-changed", this.itemsPerPage);
      this.inputPage = 1;
    },
  },
  watch: {
    currentPage(newVal) {
      this.inputPage = newVal;
    }
  }
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  gap: 10px;
}

.pagination button {
  padding: 8px 12px;
  margin: 0 5px;
  border: none;
  border-radius: 4px;
  background-color: #409eff;
  cursor: pointer;
}

.pagination button:disabled {
  cursor: not-allowed;
}

.page-input {
  width: 60px;
  margin: 0 10px;
  padding: 5px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.page-size-select {
  padding: 5px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style> 